<template>
  <div class="home">
    <div class="banner">
      <swiper :sw_params="sw_params_banner" :type_flag="sw_params_banner_type_flag" :height="sw_params_banner_height"></swiper>
    </div>

    <div class="container">
      <!-- news 新闻-->
      <div class="hot-news">
        <index-title text="热门资讯"></index-title>
        <div class="hot-news-content">
          <div class="hot-news-left">
            <swiper :sw_params="sw_params_news" :height="sw_params_news_height"></swiper>
          </div>
          <div class="hot-news-center">
            <a href="/questions"
            target="_blank"
            class="news-item WordJustOneLine"
            v-for="(item,index) of 8"
            :key="index"
            :class="{'news-item-top':index==0}"
            ><span v-show="index!=0">[湖南专科本科医学类学校]</span>2021年湖南省专升本报名范围及报考流程年湖南省专升本报名范围及报考流程 </a>
            <a href="/questions"
            target="_blank"
            class="news-item WordJustOneLine"
            v-for="(item,index) of 8"
            :key="index + '-only'"
            :class="{'news-item-top':index==0}"
            ><span v-show="index!=0">[湖南专科本科医学类学校]</span>2021年湖南省专升本报名范围及报考流程年湖南省专升本报名范围及报考流程 </a>
          </div>
          <div class="hot-news-right">
            <!-- 倒计时 -->
            <div class="hot-right-top">
              <div class="hot-right-top-left">考试<br>题型</div>
              <div class="hot-right-top-right">
                <div class="time">
                  <div>2022</div>
                  <span>年</span>
                  <div>2022</div>
                  <span>月</span>
                  <div>2022</div>
                  <span>日</span>
                </div>
                <div class="cut"><span>距离2022考研还有</span><span class="cut_time">{{this.cutTime}}</span><span>天</span></div>
              </div>
            </div>
            <!-- 表单 -->
            <div class="hot-right-bot">
              <p class="hot-form-title">院校和专业选择有盲点？专升本统考不知道如何复习？</p>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
                <el-form-item label="" prop="name">
                  <el-input placeholder="请输入姓名" v-model="ruleForm.name">
                      <template slot="prepend">姓名</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="userMobile">
                  <el-input placeholder="请输入电话" v-model="ruleForm.userMobile">
                      <template slot="prepend">电话</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="education">
                  <el-input placeholder="请输入院校" v-model="ruleForm.education">
                      <template slot="prepend">院校</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="major">
                  <el-input placeholder="请输入专业" v-model="ruleForm.major">
                      <template slot="prepend">专业</template>
                  </el-input>
                </el-form-item>

                <el-form-item>
                  <el-button style="width: 100%;" type="danger" @click="submitForm('ruleForm')">立即创建</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- hot -->
      <index-hot></index-hot>
      <!-- 课程 hot course -->
      <div class="hot-course">
        <index-title text="热门课程"></index-title>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="hot-course-item">
              <img src="" alt="">
              <div class="word">
                <h1 class="title">fdasfdas</h1>
                <h2 class="desc">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h2>
              </div>

            </div>
          </el-col>
          <el-col :span="6">
            <div class="hot-course-item">
              <img src="" alt="">
              <div class="word">
                <h1 class="title">fdasfdas</h1>
                <h2 class="desc">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h2>
              </div>

            </div>
          </el-col>
          <el-col :span="6">
            <div class="hot-course-item">
              <img src="" alt="">
              <div class="word">
                <h1 class="title">fdasfdas</h1>
                <h2 class="desc">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h2>
              </div>

            </div>
          </el-col>
          <el-col :span="6">
            <div class="hot-course-item">
              <img src="" alt="">
              <div class="word">
                <h1 class="title">fdasfdas</h1>
                <h2 class="desc">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h2>
              </div>

            </div>
          </el-col>


        </el-row>
      </div>
      <!-- 信息 -->
      <div class="info">
        <!-- info-left -->
        <div class="baokao">
          <index-title text="报考信息"></index-title>
          <index-title text="择校" type="h2"></index-title>
          <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>警告按钮</el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="danger" plain class="baokao_item" round>警告按钮</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>警告按钮</el-button>
            </el-col>
          </el-row>
          <index-title text="报名" type="h2"></index-title>
          <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>报名条件</el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="danger" plain class="baokao_item" round>报名时间</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>报名入口</el-button>
            </el-col>
          </el-row>
          <index-title text="考试" type="h2"></index-title>
          <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>考试时间</el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="danger" plain class="baokao_item" round>考试科目</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>考试大纲</el-button>
            </el-col>
          </el-row>
          <index-title text="志愿" type="h2"></index-title>
          <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>成绩查询</el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="danger" plain class="baokao_item" round>填报入口</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>填报须知</el-button>
            </el-col>
          </el-row>
          <index-title text="录取" type="h2"></index-title>
          <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>录取比例</el-button>
            </el-col>
            <el-col :span="8">
               <el-button type="danger" plain class="baokao_item" round>面试加分</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="danger" plain class="baokao_item" round>分数线</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- info-center -->
        <div class="info-center">
          <index-title text="升本常识"></index-title>
          <a
          v-for="item of 18"
          :key="item"
          href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
        </div>
        <!-- info-right -->
        <div class="info-right">
          <div class="info-right-banner"></div>
          <index-title text="升本工具箱"></index-title>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item origin">新手指南</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item blue">招生计划</a>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item darkblue">疑问解答</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item green">考试用书</a>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item yellow">预约咨询</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item red">在线报名</a>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item origin">QQ备考群</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item blue">微信平台</a>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item darkblue">考办电话</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item green">考试大纲</a>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="info-right-row">
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item yellow">火爆课程</a>
            </el-col>
            <el-col :span="12">
              <a href="" target="_blank" class="info-right-item red">院校选择</a>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- question问题 -->
      <div class="question">
        <div class="question-left">
          <index-title text="常见问题"></index-title>
          <div style="margin-bottom: 10px;">
            <a
            v-for="item of 6"
            :key="item"
            href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
          </div>

          <index-title text="备考经验"></index-title>
          <el-row :gutter="20" class="question-left-row">
            <el-col :span="8">
              <div class="question-btn">招生政策</div>
            </el-col>
            <el-col :span="8">
              <div class="question-btn">报考条件</div>
            </el-col>
            <el-col :span="8">
              <div class="question-btn">报名入口</div>
            </el-col>
          </el-row>
          <div>
            <a
            v-for="item of 9"
            :key="item"
            href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
          </div>
        </div>
        <div class="question-center">
          <div class="question-center-swiper">

          </div>
          <div class="question-center-bot">
            <index-title text="火爆问题"></index-title>
            <a
            v-for="item of 6"
            :key="item"
            href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
          </div>
        </div>
        <div class="question-right">
          <index-title text="热门院校"></index-title>
          <div class="hot-school">
            <a href="" class="hot-school-item" target="_blank" v-for="item of 6" :key="item">
              <div class="hot-school-item-img">
                <img src="/school1.png" alt="">
              </div>
              <div class="hot-school-item-word">
                <h1 class="hot-school-item-title">湖南涉外经济学院</h1>
                <p class="hot-school-item-desc word-two-line">湖南涉外经济学院坐落于湖南省长沙市湖南涉外经济学院坐落于湖南省长沙市</p>
              </div>
            </a>
            <div class="more">更多专升本院校</div>
          </div>

        </div>
      </div>
      <!-- 产品 -->
      <div class="product">
        <index-title text="升本辅导"></index-title>
        <div class="product-center">
          <div class="product-left"></div>
          <div class="product-right">
            <div class="product-tag-body">
              <div class="product-tag active">公共课</div>
              <div class="product-tag">专业课</div>
              <div class="product-tag">周末辅导无忧系列</div>
              <div class="product-tag">鹰飞集训营系列</div>
              <div class="product-tag">定制系列</div>
              <div class="product-tag">在线系列</div>
            </div>
            <div class="product-item-body">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item,index) in 6" :key="index">
                  <a href="" target="_blank" class="product-item">
                    <img src="" alt="" class="product-img">
                    <div class="product-word">
                      <h1 class="product-title">三级标题</h1>
                      <p class="product-desc">文案文案文案文案文案文案</p>
                    </div>
                  </a>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 社区 -->
      <div class="shequ">
        <div class="shequ-left1">
          <index-title text="社区答疑"></index-title>
          <a
          v-for="item of 13"
          :key="item"
          href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
        </div>
        <div class="shequ-left1">
          <index-title text="社区热议"></index-title>
          <a
          v-for="item of 13"
          :key="item"
          href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
        </div>
        <div class="shequ-left2">
          <index-title text="学员经验"></index-title>
          <el-row :gutter="20" class="shequ-left2-row">
            <el-col :span="8">
              <div class="shequ-btn">招生政策</div>
            </el-col>
            <el-col :span="8">
              <div class="shequ-btn">报考条件</div>
            </el-col>
            <el-col :span="8">
              <div class="shequ-btn">报名入口</div>
            </el-col>
          </el-row>
          <div>
            <a
            v-for="item of 12"
            :key="item"
            href="" target="_blank" class="info-item WordJustOneLine">专升本难不难专升本难不难专升本难不难专升本难不难，升本概率是多少？</a>
          </div>

        </div>
        <div class="shequ-right">
          <index-title text="学员评价"></index-title>
          <div class="hot-school">
            <a href="" class="hot-school-item" target="_blank" v-for="item of 4" :key="item">
              <div class="hot-school-item-img">
                <img src="/school1.png" alt="">
              </div>
              <div class="hot-school-item-word">
                <h1 class="hot-school-item-title">XX同学</h1>
                <p class="hot-school-item-desc word-two-line">湖南涉外经济学院坐落于湖南省长沙市湖南涉外经济学院坐落于湖南省长沙市</p>
              </div>
            </a>
            <div class="more">更多学员评价</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import swiper from '@/components/swiper.vue'
import indexTitle from '@/components/index-title.vue'
import indexHot from '@/components/index-hot.vue'
export default {
  data(){
    var validateuserMobile = (rule, value, callback) => {
      const isuserMobile = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
      const isMob = /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;

      if(isMob.test(value)||isuserMobile.test(value)){
        callback();
      }else{
        callback(new Error('请输入正确的电话号或座机号'));
      }
    }
    return{
      cutTime:0,//倒计时
      sw_params_banner:{
        logoOption: {//swiper配置
              loop: true,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              autoplay: {
                delay: 3000,
              }
        },
        data:[
          {
            url:'//img.cswendu.com/20200902_152805_jpeg_5f4f498546d4612yy_x4.jpeg'
          },
          {
            url:'//img.cswendu.com/20210830_100913_jpeg_612c3dc9307dekuj5_x4.jpeg'
          },
        ]
      },
      sw_params_banner_type_flag:true,
      sw_params_banner_height:'380px',
      sw_params_news:{
        logoOption: {//swiper配置
              loop: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              autoplay: {
                delay: 3000,
              },
              // slidesPerView : 4,
              // spaceBetween : 10,
              direction: 'vertical',
        },
        data:[
          {
            url:'//img.cswendu.com/20210331_145608_jpeg_60641d08ed2fdhkr_x4.jpeg'
          },
          {
            url:'//img.cswendu.com/20210331_145608_jpeg_60641d08ed2fdhkr_x4.jpeg'
          },
          {
            url:'//img.cswendu.com/20210331_145608_jpeg_60641d08ed2fdhkr_x4.jpeg'
          },
          {
            url:'//img.cswendu.com/20210331_145608_jpeg_60641d08ed2fdhkr_x4.jpeg'
          },
          {
            url:'//img.cswendu.com/20210331_145608_jpeg_60641d08ed2fdhkr_x4.jpeg'
          },
        ]
      },
      sw_params_news_height:'450px',
      //表单
      ruleForm: {
        name: '',
        userMobile:'',
        education:'',
        major:''
      },
      //表单------验证规则
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
        ],
        userMobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: validateuserMobile, trigger: 'blur' }
        ],
      }
    }
  },
  components:{
    indexTitle,
    swiper,
    indexHot
  },
  head(){
    return {
      title:'专升本首页',
      meta:[
        {
          hid:'description',
          name:'description',
          content:'这里是首页描述'
        },
        {
          hid:'keywords',
          name:'keywords',
          content:'这里是首页关键词'
        },
      ]
    }
  },
  mounted() {
    this.dealDate()
  },
  methods:{
    submitForm(formName) {//表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.insertQuasiUserCollection()
          // this.tencentVerificationCode()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    dealDate(){//计算倒计时时间
      let end = new Date('2021/12/1').getTime()
      let now = new Date().getTime()
      let data = new Date().cutTime(now,end)
      console.log(data.msg)
      this.cutTime = data.cutTime
    },
    async insertQuasiUserCollection(){//报名
      let data = {
        source:window.location.href,
        remark:'首页用户报名'
      }
      data = Object.assign({},data,this.ruleForm)
      let result = await this.$api.user.insertQuasiUserCollection(data)
      if(result.code === window.g.SUCCESS){
        this.$message({
          message: result.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: result.msg,
          type: 'error'
        });
      }
    },
    async tencentVerificationCode(){//验证码
      let data = {
        mobile:this.ruleForm.userMobile
      }
      let result = await this.$api.user.tencentVerificationCode(data)
      if(result.code === window.g.SUCCESS){
        this.$message({
          message: result.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: result.msg,
          type: 'error'
        });
      }
    }
  }
}
</script>
<style scoped="scoped" lang="scss">
.banner{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.home{
  // padding-bottom: 1000px;
  background-color: #f8f8f8;
}
.container{
  padding: 20px 10px;
  background-color: white;
  box-sizing: border-box;
}
.hot-news-content{
  display: flex;
  .hot-news-left{
    width: 234px;
    height: 450px;
    // height: 388px;
    overflow: hidden;
  }
  .hot-news-center{
    box-sizing: border-box;
    padding: 0 20px;
    width: 626px;
    .news-item{
      display: block;
      font-size: 18px;
      color: $text1_color;
      span{
        color: $text2_color;
        margin-right: 5px;
      }
      &:hover{
        color: $active_color;
      }
    }
    .news-item-top{
      font-weight: bold;
      font-size: 20px;
      color: $text1_color;
    }
  }
  .hot-news-right{
    width: 320px;
    .hot-right-top{
      display: flex;
      .hot-right-top-left{
        width: 74px;
        height: 74px;
        background-color: $active_color;
        color: white;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        padding-top: 6px;
        box-sizing: border-box;
      }
      .hot-right-top-right{
        width: calc(100% - 74px);
        box-sizing: border-box;
        background-color:#ffbc9b;
        // background-color: $sec_color;
        // opacity: 0.8;
        .time{
          opacity: 1;
          margin: 0 auto;
          margin-top: 10px;
          width: fit-content;
          display: flex;
          font-size: 14px;
          div,span{
            padding: 5px 10px;
          }
          span{
            padding: 5px 5px;
          }
          div{
            color: $active_color;
            background-color: white;
            border-radius: 5px;
          }
        }
        .cut{
          opacity: 1;
          margin-top: -6px;
          text-align: center;
          font-size: 16px;
          color: #000000;
          .cut_time{
            padding: 0 4px;
            font-size: 26px;
            color: $active_color;
            font-weight: bold;
          }
        }
      }
    }
    .hot-right-bot{
      background-color: #f9fafc;
      border: 1px solid #ebebeb;
      box-shadow: 0 0 8px 0 rgba(232 ,237 ,250 ,0.6), 0 2px 4px 0 rgba(232 ,237 ,250 ,0.5);
      box-sizing: border-box;
      padding: 5px;
      .hot-form-title{
        font-size: 18px;
        color: $active_color;
      }
    }
  }
}
.hot-course{
  margin-top: 20px;
  .hot-course-item{
    width: 280px;
    transition: all 0.3s;
    .word{
      padding: 0 10px 10px 10px;
    }
    img{
      width: 100%;
      height: 150px;
      background-color: $text2_color;
    }
    .title{
      font-size: 18px;
      color: $title2_color;
    }
    .desc{
      font-weight: normal;
      font-size: 14px;
      color: $text2_color;
    }
    &:hover{
      box-shadow: 0 0 20px 0 #afafafcc;
    }
  }
}
.info{
  margin-top: 20px;
  overflow: hidden;
  .baokao{
    float: left;
    width: 440px;
    .baokao_item{
      width: 130px;

    }
  }
  .info-center{
    float: left;
    width: 440px;
    margin-left: 40px;
  }
  .info-right{
    float: right;
    .info-right-banner{
      margin-top: 38px;
      height: 118px;
      width: 220px;
      background-color: grey;
      margin-bottom: 10px;
    }
    .info-right-row{
      margin-bottom: 10px;
    }
    .info-right-item{
      height: 36px;
      width: 100%;
      line-height: 36px;
      font-size: 16px;
      color: white;
      text-align: center;
      display: block;
      border-radius: 4px;

      &.origin{
        background-color: rgba(242,114,52,1);
        &:hover{
          background-color: rgba(242,114,52,0.8);
        }
      }
      &.blue{
        background-color: rgba(64,158,255,1);
        &:hover{
          background-color: rgba(64,158,255,0.8);
        }
      }
      &.green{
        background-color: rgba(103,194,58,1);
        &:hover{
          background-color: rgba(103,194,58,.8);
        }
      }
      &.darkblue{
        background-color: rgba(69,110,181,1);
        &:hover{
          background-color: rgba(69,110,181,.8);
        }
      }
      &.red{
        background-color: rgba(238,62,50,1);
        &:hover{
          background-color: rgba(238,62,50,.8);
        }
      }
      &.yellow{
        background-color: rgba(247,203,59,1);
        &:hover{
          background-color: rgba(247,203,59,.8);
        }
      }
    }
  }
}
.info-item{
  font-size: 16px;
  color: $text1_color;
  padding-left: 20px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: block;
  &:hover{
    color: $active_color;
  }
  &::after{
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: $sec_color;
    content: '';
    border-radius: 8px;
  }
}
.question{
  overflow: hidden;
  margin-top: 20px;
  .question-left{
    float: left;
    width: 440px;
    .question-btn{
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      line-height: 36px;
      border-radius: 36px;
      text-align:center;
      font-size:16px;
      color: $text1_color;
      border:1px solid $text1_color;
      transition:all 0.3s;
      cursor: pointer;
      &:hover{
        color: white;
        background-color: $active_color;
        border:1px solid $active_color;
      }
    }
    .question-left-row{
      margin-bottom: 10px;
    }
  }
  .question-center{
    float: left;
    width: 440px;
    margin-left: 40px;
    .question-center-swiper{
      height: 268px;
      width: 440px;
      background-color: gray;
      margin-top: 39px;
    }
    .question-center-bot{
      margin-top: 20px;
    }
  }
  .question-right{
    float: right;
    width: 220px;
    .hot-school{
      background-color: #f9fafc;
      border: 1px solid #ebebeb;
      box-shadow: 0 0 8px 0 rgba(232 ,237 ,250 ,0.6), 0 2px 4px 0 rgba(232 ,237 ,250 ,0.5);
      .hot-school-item{
        display: block;
        display: flex;
        padding: 5px;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #ebebeb;
        .hot-school-item-img{
          width: 56px;
          height: 62px;
          // background-color: grey;
        }
        .hot-school-item-word{
          width: calc(100% - 55px);
          box-sizing: border-box;
          padding-left: 5px;
          .hot-school-item-title{
            font-size: 16px;
            color: $text1_color;
          }
          .hot-school-item-desc{
            font-size: 14px;
            color: $text1_color;

          }
        }
      }
      .more{
        font-size: 16px;
        color: white;
        text-align: center;
        background-color: #46b0fe;
      }
    }
  }
}

.product{
  margin-top: 20px;
  .product-center{
    overflow: hidden;
    .product-left{
      float: left;
      width: 280px;
      height: 464px;
      background-color: grey;
    }
    .product-right{
      float: left;
      width: calc(100% - 280px);
      padding-left: 20px;
      box-sizing: border-box;
      .product-tag-body{
        display: flex;
        justify-content: space-around;
        .product-tag{
          font-size: 22px;
          color: $text1_color;
          font-weight: bold;
          border-bottom: 3px solid transparent;
          transition: all 0.3s;
          cursor: pointer;
          &.active{
            color: $active_color;
            border-bottom: 3px solid $active_color;
          }

        }
      }
      .product-item-body{
        margin-top: 10px;
        .product-item{
          display: block;
          margin-bottom: 20px;
          .product-img{
            height: 150px;
            width: 100%;
            background-color: grey;
          }
          .product-word{
            padding:0 5px;
            .product-title{
              font-size: 18px;
              color: $text1_color;
            }
            .product-desc{
              font-size: 14px;
              color: $text2_color;
            }
          }
        }
      }
    }
  }
}
.shequ{
  overflow: hidden;
  .shequ-left1{
    float: left;
    width: 266px;
    margin-right: 20px;
  }
  .shequ-left2{
    width: 310px;
    float: left;
    .shequ-left2-row{
      .shequ-btn{
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        line-height: 30px;
        border-radius: 30px;
        text-align:center;
        font-size:13px;
        color: $text1_color;
        border:1px solid $text1_color;
        transition:all 0.3s;
        cursor: pointer;
        margin-bottom: 10px;
        &:hover{
          color: white;
          background-color: $active_color;
          border:1px solid $active_color;
        }
      }
    }
  }
  .shequ-right{
    float: right;
    width: 220px;
    .hot-school{
      background-color: #f9fafc;
      border: 1px solid #ebebeb;
      box-shadow: 0 0 8px 0 rgba(232 ,237 ,250 ,0.6), 0 2px 4px 0 rgba(232 ,237 ,250 ,0.5);
      .hot-school-item{
        display: block;
        display: flex;
        padding: 5px;
        box-sizing: border-box;
        align-items: center;
        border-bottom: 1px solid #ebebeb;
        .hot-school-item-img{
          width: 56px;
          height: 56px;
          border-radius: 56px;
          background-color: grey;
        }
        .hot-school-item-word{
          width: calc(100% - 55px);
          box-sizing: border-box;
          padding-left: 5px;
          .hot-school-item-title{
            font-size: 16px;
            color: $text1_color;
          }
          .hot-school-item-desc{
            font-size: 14px;
            color: $text1_color;

          }
        }
      }
      .more{
        font-size: 16px;
        color: white;
        text-align: center;
        background-color: #46b0fe;
      }
    }
  }
}


</style>
